<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<!-- Bootstrap -->
<link
	href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
	rel="stylesheet">
<link th:href="@{/bblog/css/common.css}" rel="stylesheet" />
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script
	src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<style>
.bord {
	border: 1px solid #FFF5EE;
}
</style>
<script>
	$(function() {
		$('#myCarousel').carousel({
			interval : 2000,
		})
		$("#myCarousel li").click(function() {
			var index = $(this).attr("data-slide-to")
			$('#myCarousel').carousel(parseInt(index))
		})
	})
</script>
</head>
<body>

	<nav class="navbar  navbar-inverse navbar-fixed-top">
		<div class="container">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#"><img
					th:src="@{/bblog/img/logo.png}" style="margin-top: -10px;"></a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li  th:each="type:${@blogs.geTypes()}"  th:classappend="${typeId == type.id} ? 'active' : ''" ><a th:href="@{'/front/list.html?typeId='+${type.id}}">[[${type.name}]]</a></li>
				</ul>
				<form class="navbar-form navbar-left"  action="/front/list.html" method="post" id="searchForm">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="输入关键字" name="title">
						</div>
						<button type="submit" class="btn btn-info">搜索</button>
					</form>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->

	</nav>



	<div class="container top">

		<ol class="breadcrumb">
			<li><a href="#">当前位置</a></li>
			<li class="active">首页</li>
		</ol>


		<!--轮播图-->
		<div class="row">
			<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
				<div id="carousel-example-generic" class="carousel slide"
					data-ride="carousel">
					<!-- Indicators -->
					<ol class="carousel-indicators">
						<li data-target="#carousel-example-generic" data-slide-to="0"
							class="active"></li>
						<li data-target="#carousel-example-generic" data-slide-to="1"></li>
						<li data-target="#carousel-example-generic" data-slide-to="2"></li>
					</ol>

					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox"
						style="text-align: center;">
						<div class="item active">
							<img th:src="@{/bblog/img/springboot-blog.png}" alt="..."
								style="width: 100%;height: 300px;">
							<div class="carousel-caption">
								<!-- 个人博客系统 -->
							</div>
						</div>
						<div class="item">
							<img th:src="@{/bblog/img/java1234.png}" alt="..."
								style="width: 100%;height: 300px;">
							<div class="carousel-caption">
								<!-- java1234带你入门到上班 -->
							</div>
						</div>
						<div class="item">
							<img th:src="@{/bblog/img/template.png}" alt="..."
								style="width: 100%;height: 300px;">
							<div class="carousel-caption">
								<!-- 系统通知 -->
							</div>
						</div>
						广告投放请联系站长
					</div>

					<!-- Controls -->
					<a class="left carousel-control" href="#carousel-example-generic"
						role="button" data-slide="prev"> <span
						class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a> <a class="right carousel-control" href="#carousel-example-generic"
						role="button" data-slide="next"> <span
						class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
			</div>
		</div>


		<div class="row">

			<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
				<div class="panel panel-default">
					<div class="panel-body">
						
						<div th:each="blog:${@blogs.getBlogs(15,'create_time desc')}">
							<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
								<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
									<img th:src="${blog.mainPic}" alt="..."
										style="width: 100%; height: 100%;">
								</div>
								<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
									<p style="font-size: 16px; color: black;">
										<a th:href="@{'/front/blogs/'+${blog.id}+'.html'}"
											target="_blank" th:title="${blog.title}"
											th:text="${blog.title}">【java学习笔记】docker下如何部署java项目</a>
									<p>
									<p style="font-size: 12px;">
										docker下如何部署java项目docker下如何部署java项目docker
										下如何部署java项目docker下如何部署java项目docker下如何
										部署java项目docker下如何部署java项目docker下如何部署</p>
									<p style="font-size: 12px;">发布人：小邓 &nbsp;&nbsp;&nbsp;&nbsp;
										发布时间：2012-12-12 &nbsp;&nbsp;&nbsp;&nbsp; 浏览量：（100）</p>
								</div>
							</div>
							<hr size="1" noshade="noshade"
								style="border: 1px #cccccc dotted;">
						</div>
					</div>
				</div>
			</div>

			<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">

				<div class="thumbnail" style="text-align: center;">
					<a href="#"> <img th:src="@{/bblog/img/wx.jpg}" alt="...">
					</a>
					<p>扫码关注我</p>
				</div>

<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">推荐阅读</h3>
						</div>
						<div class="panel-body" style="text-align: left;">
							<p  th:each="blog:${@blogs.getBlogs(7,'look_num desc,create_time desc')}">
								<a th:href="@{'/front/blogs/'+${blog.id}+'.html'}" target="_blank" th:text="${#strings.abbreviate(blog.title,20)+'...'}"></a>
							</p>
						</div>
					</div>

					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">热门文章</h3>
						</div>
						<div class="panel-body" style="text-align: left;">
							<p  th:each="blog:${@blogs.getBlogs(7,'look_num desc')}">
								<a th:href="@{'/front/blogs/'+${blog.id}+'.html'}" target="_blank" th:text="${#strings.abbreviate(blog.title,20)+'...'}"></a>
							</p>
						</div>
					</div>

					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">最新发布</h3>
						</div>
						<div class="panel-body" style="text-align: left;">
							<p  th:each="blog:${@blogs.getBlogs(7,'create_time desc')}">
								<a th:href="@{'/front/blogs/'+${blog.id}+'.html'}" target="_blank" th:text="${#strings.abbreviate(blog.title,20)+'...'}"></a>
							</p>
						</div>
					</div>
				

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">友情链接</h3>
					</div>
					<div class="panel-body" style="text-align: left;">
						<p>
							<a href="">DEMO程序园</a>
						</p>

						<p>
							<a href="">java1234</a>
						</p>
						<p>
							<a href="">杨青博客</a>
						</p>
					</div>
				</div>
			</div>

		</div>

	</div>
	<nav class="navbar top">
		<div style="text-align: center; color: #333;">
			<p>版权所有@DEMO程序园2019-2020 ICP备案号：粤ICP99981212-1</p>
			<p>免责申明：网站资源分享来源于网络，如原作者认为侵权请联系，我们会立即删除。</p>
		</div>
	</nav>
</body>
</html>
